import { useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
import MainContent from "./components/MainContent";
import RightSidebar from "./components/RightSidebar";

const StackOverflowClone = () => {
  const [activeTab, setActiveTab] = useState("Home");

  return (
    <Router>
      <div className="h-screen overflow-hidden bg-gray-200 flex flex-col">
        {/* Header 固定高度 */}
        <header className="h-16 shrink-0">
          <Header />
        </header>

        {/* 内容区域 */}
        <div className="flex overflow-hidden">
          <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
          {/* 主内容带滚动 */}
          <main className="flex-1 overflow-y-auto p-4">
            <MainContent activeTab={activeTab} />
          </main>
          <RightSidebar />
        </div>

        <Routes>
          <Route path="/" element={<Navigate to="/user" />} />
        </Routes>
      </div>
    </Router>
  );
};

export default StackOverflowClone;
